<template>
  <div class="upload">
    <div class="img" v-if="list.length != 0">
      <img :src="list[0].url" alt="">
    </div>
    <el-upload
      v-else
      :action="uploadUrl"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-success="success"
      :on-exceed="onExceed"
      :before-upload="beforeUpload"
      :data="data"
      :headers="headers"
      accept="image/*"
      :file-list="fileList"
      :limit="limit"
      :show-file-list="false"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import axios from "axios";

export default {
  props: {
    fileList: {
      type: Array,
      default() {
        return [];
      }
    },
    limit: {
      type: Number,
      default() {
        return 0;
      }
    },
    name: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      uploadUrl: "",
      host: "",
      dir: "",
      list: [],
      maxSize: 1,
      headers: {
        Authorization: "Bearer " + getToken()
      },
      data: {}
    };
  },
  mounted() {
    this.getossimg();
  },
  methods: {
    onExceed(file, fileList) {
      this.$message({
        message: this.name + "最多上传" + this.limit + "张图片",
        type: "warning"
      });
    },
    handleRemove(file, fileList) {
      this.$emit("update:fileList", fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    getossimg() {
      axios
        .get(
          "https://api.mdc.movecloud.cn/api/oss-signature?objname=alphajiushikart"
        )
        .then(res => {
          if (res.status * 1 == 200) {
            this.uploadUrl = res.data.data.host;
            this.data = {
              signature: res.data.data.signature,
              ossAccessKeyId: res.data.data.accessid,
              policy: res.data.data.policy,
              key: res.data.data.dir + res.data.sys_time
            };
            this.host = res.data.data.host;
            this.dir = res.data.data.dir + res.data.sys_time;
          }
        });
    },
    success(r, file) {
      let imgurl = this.host + "/" + this.data.key;

      const list = [...this.fileList];
      list.push({ url: imgurl });
      this.list.push({ url: imgurl });
      // console.log('9999', this.fileList, list)
      this.$emit("update:fileList", list);
    },
    beforeUpload(file) {
      if (file.size > this.maxSize * 1024 * 1024) {
        this.$message({
          message: "上传文件过大,请上传小于" + this.maxSize + "M的文件",
          type: "warning"
        });
        return;
      }
      this.data.key = this.dir + "." + file.uid + "/" + file.name;
    }
  }
};
</script>

<style lang="less" scoped>
  .img{
    width: 200px;
    height: 200px;
    img{
      width: 200px;
      height: 200px;
    }
  }
</style>
